<template>
  <div id="home">
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,i) in banner" :key="i">
          <img :src="item.picUrl" alt />
        </van-swipe-item>
      </van-swipe>
      <div class="nav">
        <ul>
          <li>
            <van-icon name="like-o" size="30" />
            <p>签到</p>
          </li>
          <li>
            <van-icon name="coupon-o" size="30" />
            <p>礼券</p>
          </li>
          <li>
            <van-icon name="fire-o" size="30" />
            <p>砍价</p>
          </li>
          <li>
            <van-icon name="goods-collect-o" size="30" />
            <p>专栏</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 砍价列表 -->
    <CutList :cutList=cut />

    <!-- 精选专题 -->
    <Special :special=special />

    <!-- 人气推荐 -->
    <header>人气推荐</header>
    <Recommend :goodslist=goodslist />

    <!-- 底部导航 -->
    
    <div class="top" v-show="show" @click="goTop()"><van-icon name="arrow-up" size="25"/></div>
    <tabbar />
  </div>
</template>

<script>
import Recommend from './recommend'
import Special from './special'
import CutList from './cutlist'
import tabbar from "@/components/Share/Tabbar";
export default {
  name: "home",
  components: { tabbar,CutList,Special,Recommend },
  data() {
    return {
      show:false,
      banner: [],
      cut: [],
      special: [],
      goodslist: []
    };
  },
  methods: {
    //返回页面顶部
    goTop(){
      let html = document.documentElement || document.body;
      
      let timer = setInterval(()=>{
        if(html.scrollTop == 0 ){
          clearInterval(html)
        }
        html.scrollTop = html.scrollTop - 30;
      },10)
    },
  
    //请求轮播图数据
    getBannerList() {
      this.$axios({
        url: "https://api.it120.cc/small4/banner/list"
      }).then(res => {
        if (res.code == 0) {
          // console.log(res);
          this.banner = res.data;
        }
      });
    },
    //请求砍价列表数据
    getCutList() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/kanjia/list"
      }).then(res => {
        if (res.code == 0) {
          // console.log(res);
          let ids = Object.keys(res.data.goodsMap).splice(-3);
          // console.log(ids);
          ids.forEach(item => {
            this.cut.push(res.data.goodsMap[item]);
          });
          // this.cut=res.data.goodsMap
        }
      });
    },
    //精选专题列表
    getSpecialList() {
      this.$axios({
        url: "https://api.it120.cc/small4/cms/news/list"
      }).then(res => {
        if (res.code == 0) {
          // console.log(res);
          this.special = res.data;
        }
      });
    },
    getGoodsList() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/list"
      }).then(res => {
        if (res.code == 0) {
          console.log(res);
          let data = res.data.filter(item => {
            return item.name.indexOf("测试") == -1;
          });
          this.goodslist = data.slice(-6);
        }
      });
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getBannerList();
    this.getCutList();
    this.getSpecialList();
    this.getGoodsList();
    //监听数据的显示
    window.addEventListener("scroll",()=>{
      let html = document.documentElement || document.body;
      if(html.scrollTop > html.clientHeight){
        this.show = true;
      }else{
        this.show = false;
      }
    })
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
#home {
  padding-bottom: 1rem;
  background: rgb(241, 240, 240);
  // 轮播图
  .banner {
    margin-bottom: 0.3rem;
    position: relative;
    background: white;
    width: 100%;
    img {
      width: 100%;
    }

    .nav {
      background: white;
      position: absolute;
      bottom: 0rem;
      width: 100%;
      border-top-left-radius: 0.8rem;
      border-top-right-radius: 0.8rem;
      ul {
        width: 100%;
        height: 2rem;
        display: flex;
        justify-content: space-around;
        li {
          padding-top: 0.5rem;
          line-height: 0.5rem;
          font-size: 0.3rem;
        }
      }
    }
  }

  header {
    margin-top: 0.2rem;
    width: 100%;
    background: white;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.3rem;
    height: 0.8rem;
  }

  .top{
    position: fixed;
    padding: .2rem;
    bottom: 1.2rem;
    right: 1rem;
    background: white;
    border-radius: 50%;
    flex:1;
    box-shadow: 0px 3px 5px rgba(0, 0, 0,.6);
  }

}
</style>